<template>
	<!-- 我的评论 -->	
	<view class="">	
		<view class="current-time flex">		
			<picker mode="date" v-model="changeDate" @change="bindDateChange" style="width:33%;position:relative;top: 5px;">
				<input class="padding-10" :value="changeDate"  placeholder="" disabled/>								
			</picker>	
			<text class="yzb yzb-next"></text>
		</view>
		<view class="main bg-ff">
			<view class="posts-wap">
				<view class="p-label flex">
					<view class="flex-1 flex" style="align-items: center;">
						<image src="https://web.suqzp.com/public/v12.png" style="width: 66rpx;height: 66rpx;display: block;"></image>
						<view class="fc-33 fs-26 mar-left-15">
							<view>吴先生</view>
							<view class="fs-24 fc-99">2022-04-30 18:00:00</view>
						</view>
					</view>
					<image class="p-img" :src="getImgUrl(delsrc)"></image>
				</view>
				<view class="post-main">
					<view class="fc-33 fs-28 pad-top-20">{{postData.title}}</view>
					<view class="fs-28 fc-66 pad-top-15 flex" style="background: #F8F8F8;align-items: center;">
						<image src="https://web.suqzp.com/public/cl.png" style="width: 100rpx;height: 100rpx;border-radius: 8rpx;display: block;"></image>
						<view class="margin-left-15 flex-1 two-ellipsis pad-right-25">{{postData.content}}</view>
					</view>					
					<view class="flex mar-top-25">
						<view class="fs-26 fc-99">浏览{{postData.looknum}}</view>
						<view class="fs-26 fc-99 mar-left-20">点赞{{postData.forwardnum}}</view>
						<view class="fs-26 fc-99 mar-left-20">评论{{postData.fabulounum}}</view>						
					</view>
					<view class="fc-99 mar-top-20">
						吴先生 ：XXXXXXXX，XXXXXXXXX。
					</view>
					<view class="flex fc-99 fs-26 mar-top-20">查看全部2条评论<text class="yzb yzb-next"></text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {			
		data() {
			const currentTime = this.getDate({
				format: true
			})
			
			return {
				changeDate: currentTime,
				postData:{
					title:'很有道理，逻辑清晰。',
					content:'自古以来，中国人崇尚阳刚之气和尚武精神。今天的中国如此地大物博，便是由于几千年来，先人不断锐意进取，建功于域外，才使得我们华夏民族建立起东方最大的国家。中情局暗中下的圈套！',
					img:[{
						src:'https://web.suqzp.com/static/q.jpg'
					},{
						src:'https://web.suqzp.com/static/2.jpg'
					},{
						src:'https://web.suqzp.com/static/q.jpg'
					}],
					looknum:100,
					forwardnum:2,
					fabulounum:10,
					commentnum:200
				},
				delsrc :'del.png',
			}
		},
		mounted() {
			let _this = this;
			setInterval(function() {
				_this.date = Date.parse(new Date());
			}, 1000);
		},
		methods:{
			//选择时间
			bindDateChange: function(e) {
				this.changeDate = e.target.value;
			},
			//获取当前日期时间
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();							
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
				
			},
			//图片配置域名
			getImgUrl(icon){
			   return this.$mConfig.imgSrcUrl+icon;
			},
		}
	}
</script>
<style lang="scss">
	page{
		background: #f6f6f6;
	}
	.current-time{
		line-height:88rpx;
		padding-left: 35rpx;
		height: 90rpx;
		.yzb-next{
			transform: translateX(-50%);
		}
	}
	.main{
		width: 92%;
		padding: 4%;
	}
	.search {
		height:90rpx;
		width: 100%;
		display: flex;
		flex-direction: row;	
		color: #ffffff;
		align-items: center;		
		.search-input {
			z-index: 5;
			position: fixed;
			top: 28rpx;
			width: 686rpx;
			height: 82rpx;
			border-radius: 50upx;
			display: flex;
			flex-direction: row;
			background: #F7F9F9;
			align-items: center;
			.yzb-search {
				color: $font-color-999;
				font-size:35rpx;
				margin:3rpx 10rpx 0 24rpx;
			}
			input{
				width: 90%;
				font-size: 28upx;
				color: $font-color-333;
				padding: 0 36rpx 0 0;
				height: 82rpx;
			}
			image {
				width: 35upx;
				height: 35upx;
				margin-right: 10upx;
			}
		}		
	}
	.posts-wap{
		margin-top: 36rpx;
		.p-label{			
			.s-lab{
				padding: 13rpx 18rpx;
				background: #FFEFED;
				display: inline-block;
			}
			.p-img{
				width: 40rpx;
				height: 40rpx;
				display: block;
			}
		}
		.report-img{
			.img-style{
				margin: 0 0 24rpx 12rpx;
				width: 220rpx;
				height: 210rpx;
				border-radius:8rpx;
				display: flex;
				align-items: center;
				overflow: hidden;
				image{
					width: 100%;
				}
			}
			.img-style:nth-child(3n+1) {
				margin: 0 0rpx 24rpx 0;
			}
		}
		.lok-icon{
			width:44rpx;
			height: 44rpx;
			display: inline-block;
			margin-right: 6rpx;
			position: relative;
			top: 10rpx;
		}
	}
	
</style>
